<template>
    <div id="updateParkingSpaceGetPart">
        <div class="selectTypeBar">
            搜索方式： 
            <el-radio-group v-model="selectType" @change="typeSelect">           
            <el-radio  label="byUsername">用户名</el-radio>
            <el-radio  label="byPropertyManagerName">物业名</el-radio>
            <el-radio  label="byAddr">地址</el-radio>
            </el-radio-group>
        </div>
        <el-row :gutter="20">       
            <el-col :span="12" :offset="6" >
                   <el-autocomplete class="inline-input" v-model="selectValue" :fetch-suggestions="querySearch"
                    placeholder="请输入内容" 
                    ></el-autocomplete>
               <el-button type="primary" icon="el-icon-search" @click="clickSelect">搜索</el-button>
            </el-col>
        </el-row>
        <el-table :data="parkingSpaceData"  border style="width: 100%" >
             <el-table-column fixed prop="parkingSpaceNo" label="停车场号码"  width="100">
            </el-table-column>
            <el-table-column  prop="parkingSpaceAddr"  label="停车场地址"  width="250">
            </el-table-column>
            <el-table-column  prop="userId" label="用户id" width="80">
            </el-table-column>
            <el-table-column  prop="username" label="用户名" width="100">
            </el-table-column>           
            <el-table-column  prop="propertyManagerId" label="物业id" width="80">
            </el-table-column>
            <el-table-column  prop="propertyName" label="物业名称" width="200">
            </el-table-column>
            <el-table-column  prop="propertyManagerGet" label="物业比例" width="80">
            </el-table-column>
            <el-table-column  prop="platoformGet" label="平台比例" width="80">
            </el-table-column>
            <el-table-column   label="时租金/元" width="100">
                <template slot-scope="scope" >
                  {{scope.row.hourCost/100}}
                </template>
            </el-table-column>
            <el-table-column   label="日租金/元" width="100">
                <template slot-scope="scope" >
                  {{scope.row.dayCost/100}}
                </template>
            </el-table-column>
            <el-table-column   label="周租金/元" width="100">
                <template slot-scope="scope" >
                  {{scope.row.weekCost/100}}
                </template>
            </el-table-column>
            <el-table-column label="停车场图片" width="200">
                <template slot-scope="scope">
                 <el-image style="width: 100px; height: 100px" :src="scope.row.parkingSpacePic" fit="contain"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="产权证" width="200">
                <template slot-scope="scope">
                 <el-image style="width: 100px; height: 100px" :src="scope.row.parkingSpacePropertyPic" fit="contain"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="身份证" width="200">
                <template slot-scope="scope">
                 <el-image style="width: 100px; height: 100px" :src="scope.row.parkingSpaceOwnerPic" fit="contain"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="真人照" width="200">
                <template slot-scope="scope">
                 <el-image style="width: 100px; height: 100px" :src="scope.row.parkingSpaceRelownerPic" fit="contain"></el-image>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">                
                <el-button type="text" size="small" @click="beginAuditUser(scope.row)">修改</el-button>
            </template>
            </el-table-column>
        </el-table>


        <el-pagination background layout="prev, pager, next" 
        :total="pageData.total" :page-size="pageData.pageSize" :current-page="pageData.pageIndex"
        @current-change="handlePageChange"
        ></el-pagination>

        <el-dialog title="停车场提成比例修改" :visible.sync="dialogVisible" width="60%" >
            <el-descriptions class="margin-top"  :column="3" :size="size" border>              
 
                <el-descriptions-item label-class-name="mylabel" >
                    <template slot="label">
                        <i class="el-icon-location-outline"></i>
                        用户id
                    </template>
                    {{rowdata.userId}}
                </el-descriptions-item>
                 <el-descriptions-item label-class-name="mylabel"> 
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        用户名
                    </template>
                    {{rowdata.username}}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="mylabel" >
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        物业id
                    </template>
                    {{rowdata.propertyManagerId}}
                </el-descriptions-item>    
                <el-descriptions-item label-class-name="mylabel" content-class-name="mycontent1">
                    <template slot="label">
                        <i class="el-icon-user"></i>
                        停车场号码
                    </template>
                    {{rowdata.parkingSpaceNo}}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="mylabel" content-class-name="mycontent2">
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        停车场地址
                    </template>
                    {{rowdata.parkingSpaceAddr}}
                </el-descriptions-item>
                
                <el-descriptions-item label-class-name="mylabel" >
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        物业名称
                    </template>
                    {{rowdata.propertyName}}
                </el-descriptions-item>    
                <el-descriptions-item label-class-name="mylabel" >
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        时租金/元
                    </template>
                    {{rowdata.hourCost/100}}
                </el-descriptions-item>    
                <el-descriptions-item label-class-name="mylabel" >
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        日租金/元
                    </template>
                    {{rowdata.dayCost/100}}
                </el-descriptions-item>    
                <el-descriptions-item label-class-name="mylabel" >
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        周租金/元
                    </template>
                    {{rowdata.weekCost/100}}
                </el-descriptions-item> 
                <el-descriptions-item label-class-name="mylabel" >
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        审核状态
                    </template>                    
                    <span v-if="rowdata.state==0">未审核</span>
                    <span v-if="rowdata.state==1">未通过</span>
                    <span v-if="rowdata.state==2">通过</span>
                    <span v-if="rowdata.state==3">已出租</span>                
                </el-descriptions-item>      
                <el-descriptions-item label-class-name="mylabel" >
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        物业比例
                    </template>
                    <el-input  v-model="rowdata.propertyManagerGet" placeholder="0~0.3"></el-input>
                
                </el-descriptions-item>    
                <el-descriptions-item label-class-name="mylabel" >
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        平台比例
                    </template>
                     <el-input  v-model="rowdata.platoformGet" placeholder="0.1~0.3"></el-input>
                  
                </el-descriptions-item>    
            </el-descriptions>
            <el-descriptions class="margin-top"  :column="1" :size="size" border>
                <el-descriptions-item label-class-name="mylabel" >
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        修改原因
                    </template>                    
                    
                    <el-input type="textarea" :rows="2" maxlength="20" show-word-limit  placeholder="请输入修改原因" v-model="message"></el-input>
                </el-descriptions-item> 
            </el-descriptions>

            <el-descriptions class="margin-top"  :column="1" :size="size" border>
                <el-descriptions-item label-class-name="mylabel" >
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        停车场图片
                    </template>                    
                         <el-image style="width: 500px; height: 350px" :src="rowdata.parkingSpacePic" fit="contain"></el-image>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="mylabel" >
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        产权证
                    </template>                    
                         <el-image style="width: 500px; height: 350px" :src="rowdata.parkingSpacePropertyPic" fit="contain"></el-image>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="mylabel" >
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        身份证
                    </template>                    
                         <el-image style="width: 500px; height: 350px" :src="rowdata.parkingSpaceOwnerPic" fit="contain"></el-image>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="mylabel" >
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        真人照
                    </template>                    
                         <el-image style="width: 500px; height: 350px" :src="rowdata.parkingSpaceRelownerPic" fit="contain"></el-image>
                </el-descriptions-item>
            </el-descriptions>

            <span slot="footer" class="dialog-footer">
                <el-button @click="cansleAudit">取 消</el-button>
                <el-button type="primary" @click="confirmAudit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<style>
    .selectTypeBar {
        margin: 20px;
    }
    .inline-input{
        width: 400px;
    }
</style>

<script>
export default {
    name:"updateParkingSpaceGetPart",
     inject:['reload'],
    data(){
        return{
            selectType:"byUsername",
            selectValue:'',
            data:[],
            parkingSpaceData:[],
            pageData:{
                    total:0,
                    pageSize:3,
                    pageIndex:1,
            },
            dialogVisible:false,
            rowdata:'',
            size:'',
            message:'',
        }        
    },
    methods:{
        clickSelect(){
            this.pageData.pageIndex=1;
            this.goAndGet();
        },
        confirmAudit(){
            if((this.rowdata.propertyManagerGet<0||this.rowdata.propertyManagerGet>0.3)||
            (this.rowdata.platoformGet<0.1||this.rowdata.platoformGet>0.3)){
                this.$message({
                        message:"物业比例只能为0~0.3，平台比例只能为0.1~0.3",
                        type:"warning"
                })
                return;
            }



            let form={
                parkingSpaceId:this.rowdata.parkingSpaceId,
                managerId:localStorage.getItem("managerId"),
                isaudit:this.rowdata.state,
                message:this.message,
                propertyManagerGet:this.rowdata.propertyManagerGet,
                platoformGet:this.rowdata.platoformGet                    
            };
            
            if(this.rowdata.state==3){
                form.isaudit=2;
            }
            
            this.$axios.post('/confirmAuditParkingSpace',form)
            .then(resp=>{
                if(resp.data.success){
                    this.$message({
                        message:"比例修改成功",
                        type:"success"
                    })
                }else{
                    this.$message({
                        message:resp.data.message,
                        type:"warning"
                    })
                }
                this.reload()
            })
            .catch(error=>{
                this.$message.error('系统未知错误，审核提交失败');
                console.log(error);
            })
            this.dialogVisible=false;
        },
        cansleAudit(){
            this.dialogVisible = false;
            this.message="";
        },
        beginAuditUser(row){
            this.dialogVisible=true;
            this.rowdata=row;
        },
        handlePageChange(page){
            this.pageData.pageIndex=page;
            this.goAndGet();
        },
        typeSelect(){
            this.data=[];
            if(this.selectType==="byUsername"){
                this.getUsername();
            }else if(this.selectType==="byPropertyManagerName"){
                this.getPropertyManagerName();
            }else{
                this.getAddr();
            }
        },
        goAndGet(){
            if(this.selectType==="byUsername"){
                this.$axios.get("/getParkingSpaceByObject",{params:{
                    username:this.selectValue,
                    pageIndex:this.pageData.pageIndex
                }})
                .then(resp=>{                
                    if(resp.data.data.records.length==0){
                        this.$message("没有找到您想查找的停车场"
                        )
                    }else{
                        this.parkingSpaceData=resp.data.data.records;
                        Object.assign(this.pageData,resp.data.data);
                    }
                })
                .catch(error=>{
                    this.$message.error('系统未知错误');
                        console.log(error);
                })
            }else if(this.selectType==="byPropertyManagerName"){
               this.$axios.get("/getParkingSpaceByObject",{params:{
                    propertyName:this.selectValue,
                    pageIndex:this.pageData.pageIndex
                }})
                .then(resp=>{                
                    if(resp.data.data.records.length==0){
                        this.$message("没有找到您想查找的停车场"
                        )
                    }else{
                        this.parkingSpaceData=resp.data.data.records;
                        Object.assign(this.pageData,resp.data.data);
                    }
                })
                .catch(error=>{
                    this.$message.error('系统未知错误');
                        console.log(error);
                })
            }else{
               this.$axios.get("/getParkingSpaceByObject",{params:{
                    parkingSpaceAddr:this.selectValue,
                    pageIndex:this.pageData.pageIndex
                }})
                .then(resp=>{                
                    if(resp.data.data.records.length==0){
                        this.$message("没有找到您想查找的停车场"
                        )
                    }else{
                        this.parkingSpaceData=resp.data.data.records;
                        Object.assign(this.pageData,resp.data.data);
                    }
                })
                .catch(error=>{
                    this.$message.error('系统未知错误');
                        console.log(error);
                })
            }
        },
        querySearch(queryString, cb) {
            var data = this.data;
            var results = queryString ? data.filter(this.createFilter(queryString)) : data;
            // 调用 callback 返回建议列表的数据
            
            cb(results);
        },
        createFilter(queryString) {
            return (data) => {
                return (data.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        getUsername(){
            this.$axios.get("/getUsername",{params:{}})
            .then(resp=>{                
                if(resp.data.success){
                    for(let i=0;i<resp.data.data.length;i++){
                        let obj={value:''};
                        obj.value = resp.data.data[i];
                        this.data[i]=obj;                        
                    }                   
                    }else{
                        this.$message({
                            message:resp.data.message,
                            type:"warning"
                        })
                    }
            })
            .catch(error=>{
                this.$message.error('系统未知错误');
                    console.log(error);
            })
        },        
        getPropertyManagerName(){
            this.$axios.get("/getPropertyManagerName",{params:{}})
            .then(resp=>{                
                if(resp.data.success){
                    for(let i=0;i<resp.data.data.length;i++){
                        let obj={value:''};
                        obj.value = resp.data.data[i];
                        this.data[i]=obj;                        
                    }                   
                    }else{
                        this.$message({
                            message:resp.data.message,
                            type:"warning"
                        })
                    }
            })
            .catch(error=>{
                this.$message.error('系统未知错误');
                    console.log(error);
            })
        },
        getAddr(){
            this.$axios.get("/getAddr",{params:{}})
            .then(resp=>{                
                if(resp.data.success){
                    for(let i=0;i<resp.data.data.length;i++){
                        let obj={value:''};
                        obj.value = resp.data.data[i];
                        this.data[i]=obj;                        
                    }                   
                    }else{
                        this.$message({
                            message:resp.data.message,
                            type:"warning"
                        })
                    }
            })
            .catch(error=>{
                this.$message.error('系统未知错误');
                    console.log(error);
            })
        }        
    },
    mounted(){
        this.getUsername();
    }
}
</script>